<template>
  <div class="page">
    <div id="list_item" class="list_item_wrap">
      <div class="list_item"
           v-for="(item, index) in bingList"
           :key="index"
      >
        <div class="sort">
          <!-- 这里是排序的图标 -->
          <van-icon name="wap-nav" size="30" color="#a0a6b1"/>
        </div>
        <div class="name">
          <div>{{ item.name }}</div>
          <div>包含{{ item.num }}人</div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import Sortable from "sortablejs";
  import Vue from 'vue';
  import { Icon } from 'vant';

  Vue.use(Icon);
  export default {
    name: "DragDemo",
    data() {
      return {
        bingList: [
          {name: '第1个', num: 1},
          {name: '第2个', num: 2},
          {name: '第3个', num: 3},
          {name: '第4个', num: 4},
          {name: '第5个', num: 5},
        ]
      }
    },
    mounted() {
      //这里是获取到数组的元素
      var el = document.getElementById("list_item");
      new Sortable(el, {
        handle: ".sort", // handle's class
        animation: 150,
        onEnd:(evt)=>{
          //拖拽动作结束后执行
          this.bingList.splice(evt.newIndex, 0, this.bingList.splice(evt.oldIndex, 1)[0])
          var newArray = this.bingList.slice(0)
          this.bingList = []
          this.$nextTick(function () {
            this.bingList = newArray
            console.log(this.bingList);
          })
        }
      });


    },
    methods: {
      removeFn() {}
    }
  }
</script>

<style scoped lang="less">
  .page {
    min-height: 100vh;
    overflow-x: hidden;
  }
  .list_item_wrap {
    width: 100%;
    padding: 10px;
    overflow: hidden;
  }
.list_item {
  margin-bottom: 20px;
  max-width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  overflow: hidden;
}
</style>
